<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>用户信息-属性绑定-绑定class属性</title>
   <script src="vue.js"></script>
   <style>
      .male{
         background-color: rgb(175, 203, 245);
      }
      .female{
      background-color: rgb(248, 213, 241);
      }
   </style>
</head>
<body>
   <div id="app">
      <p>{{sayHello()}}</p>
      <ul v-bind:class="sex">
         <li>姓名 : {{name}}</li>
         <li>城市 : {{city}}</li>
      </ul>
   </div>
   <script>
      let user = {
         name: "Chance",
         city: "Beijing",
         sex: "male"
      };
      let vm = new Vue({
         el: '#app',
         data: user,
         methods:{
            sayHello(){
               return `您好，欢迎来自 ${this.city} 的 ${this.name} ！`
            }
         }
      })      
   </script>
</body>
</html>
